<template>
  <div class="login">
    <div class="bg-img">
      <van-icon class="back" name="arrow-left" @click="$router.go(-1)"
        ><van-icon name="minus" style="margin-left: -0.7rem"
      /></van-icon>
    </div>
    <div class="lable">
      <div class="login-lable">
        <div>
          <label class="iconfont icon-shouji1"></label>
          <input
            class="login-input"
            placeholder="请输入用户名"
            style="border: none"
            v-model="username"
            :readonly="readonly"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
        </div>
        <div>
          <label class="iconfont icon-mima3"></label>
          <input
            type="password"
            class="login-input"
            placeholder="请输入密码"
            v-model="password"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </div>
      </div>
      <div class="agreement">
        <van-checkbox
          v-model="checked"
          checked-color="#378754"
          class="check"
          icon-size="18"
          >请认真阅读并同意<span
            class="clause"
            @click="$router.push('/contract/pic3')"
            >《微店管理协议》</span
          ><br
        /></van-checkbox>
        <!-- <span class="clause" @click="$router.push('/privacy')"
            >《隐私权政策》</span
          > -->
      </div>

      <button class="login-button" @click="tologin">
        <span>登录</span>
        <van-loading
          v-if="loading"
          class="loading"
          color="#fff"
          size="20px"
        ></van-loading>
      </button>

      <!-- <div class="nologin"><router-link to='register' class="register">注册</router-link><router-link to='auxiliary' class="auxiliary">店铺入住小帮手?</router-link></div> -->
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { Toast, Dialog } from "vant";
import { Login } from "@/api/login";
import { Get_LJshouy } from "@/api/user";
import { removeAccessToken } from "@/lib/accessToken";
export default {
  setup() {
    const data = reactive({
      checked: false,
      username: "",
      password: "",
      loading: false,
      visible: false,
      readonly: false,
    });

    const router = useRouter();
    const store = useStore();
    const tologin = async () => {
      if (data.loading) {
        return;
      }
      if (!data.username) {
        Toast("请输入用户名！");
        return;
      }
      if (!data.password) {
        Toast("请输入密码！");
        return;
      }
      if (!data.checked) {
        Toast("请勾选下方协议！");
        return;
      }
      data.loading = true;
      const res = await Login({
        username: data.username,
        password: data.password,
      });
      data.loading = false;
      console.log("`````````", res);
      if (!res[0]) {
        return;
      }
      store.commit({
        type: "setAccessToken",
        accessToken: res[1][0].F_Secretkey,
      });
      store.commit({
        type: "GetuserInfo",
        userInfo: res[1][0],
      });
      router.push({ path: store.state.path ? store.state.path : "/user" });
    };
    //若cookie存在，将cookie中UNAME填入username，若已登录，判断username和已登录账号是否一致，不一致清空登录状态。
    const getCookie = (name) => {
      let arr = document.cookie.split("; ");
      for (let i = 0; i < arr.length; i++) {
        const temp = arr[i].split("=");
        console.log("temp", temp);
        if (temp[0] == name) {
          data.readonly = false;
          data.username = decodeURI(temp[1]);
          if (store.state.accessToken) {
            if (store.state.userInfo.F_Account == data.username) {
              router.push({ path: "/user" });
              return;
            } else {
              store.commit({
                type: "GetuserInfo",
                userInfo: "",
              });
              store.commit({ type: "setAccessToken", accessToken: "" });
              removeAccessToken();
            }
          }
        }
        if (temp[0] == "MLV") {
          if (temp[1] != 18) {
            Dialog.alert({
              title: "温馨提示",
              message:
                "亲爱的顾客，您需要在嗨逛商城购物累计到达五万，才可以申请店铺！",
              theme: "round-button",
            }).then(() => {
              window.location.href =
                "http://www.higuang365.com/wap/passport-login.html";
            });
          }
          return "";
        }
      }
      window.location.href =
        "http://www.higuang365.com/wap/passport-login.html";
      // data.readonly=false;
      // return '';
    };
    //商城处于登录状态并和微店同一账号，才能登录到微店，否跳转商城登录
    getCookie("UNAME");
    onMounted(() => {
      data.visible = true;
    });

    return { ...toRefs(data), tologin };
  },
};
</script>
<style lang="scss" scoped>
@import "@/common/style/mixin";
.login {
  animation: fadeIn 0.6s both;
  .bg-img {
    width: 100%;
    background: url("http://www.higuang365.com/public/images/poster/loginbg.png")
      no-repeat;
    height: 40rem;
    text-align: left;
    background-size: 100%;
    .back {
      line-height: 5.4rem;
      top: 0.6rem;
      left: 0rem;
      padding: 0 1rem;
      font-size: 2rem;
      color: $green;
    }
  }

  .lable {
    width: 70vw;
    margin: auto;
    padding-bottom: 5rem;
    animation: slideUp 1.5s both;
    .agreement {
      font-size: 1.2rem;
      margin-top: 1rem;
    }
    .check {
      justify-content: center;
      white-space: nowrap;
      overflow: visible;
    }
    .clause {
      color: #40a2ff;
    }
    .login-lable {
      white-space: nowrap;
      font-size: 1.5rem;
      label {
        font-size: 2.5rem;
        color: $green;
      }
      .login-input {
        margin: 1.5rem 2rem;
        border: none;
        border-bottom: 0.5px solid #b9b9b9;
        padding: 1rem 0.5rem;
      }
      .login-input::-webkit-input-placeholder {
        color: #b9b9b9;
      }
    }
    .login-button {
      border: none;
      padding: 1rem;
      border-radius: 2rem;
      width: 90%;
      background: $green;
      color: #fff;
      font-size: 1.5rem;
      margin-top: 3rem;
      position: relative;
      span {
        position: relative;
        z-index: 1;
      }
      &:after {
        content: "";
        position: absolute;
        left: 50%;
        top: 25%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 85%;
        height: 85%;
        background: -webkit-linear-gradient(131deg, #0f8a40, #0f8a40);
        background: linear-gradient(131deg, #0f8a40, #0f8a40);
        border-radius: 5rem;
        opacity: 0.4;
        -webkit-filter: blur(5px);
        filter: blur(5px);
      }
      .loading {
        display: inline;
      }
    }
    .nologin {
      display: flex;
      justify-content: space-between;
      margin-top: 1rem;
      font-size: 1.3rem;
      .register {
        color: #aaa;
      }
      .auxiliary {
        color: $green;
        text-decoration: underline;
      }
    }
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(40rem);
    opacity: 0;
  }
  30% {
    transform: translateY(40rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
